/* pages/home-school-chat/home-school-chat.wxss */
.chat-wrapper {
  height: auto;
  width: 100vw;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;

  .chat-box {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0 10rpx;
    margin-bottom: calc(env(safe-area-inset-bottom) + 60rpx);

    .subject-box {
      position: relative;
      height: 410rpx;
      width: 90vw;
      margin: 40rpx auto 0 auto;
      background-color: #f2e4c6;
      border-radius: 80rpx;
      box-sizing: border-box;
      padding: 0 10rpx;

      .container-box {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        display: flex;
        flex-direction: column;
        height: 96%;
        width: 97%;
        background-color: #fff;
        z-index: 1;
        border-radius: 75rpx;
        overflow: hidden;

        .subject-name {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 90rpx;
          background-color: #f2e5c6;
        }

        .box {
          display: flex;
          align-items: center;
          height: 67rpx;

          .label {
            margin-left: 10rpx;
          }

          .status {
            margin-left: 45rpx;
          }
        }

        .homework-box {
          @extend .box;
        }

        .evaluate-box {
          background-color: #f2e5c6;
          @extend .box;
        }

        .operate-button {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;

          .button {
            height: 87rpx;
            width: 90%;
            background-color: #5a83bf;
            border-radius: 60rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            letter-spacing: 8rpx;
            margin-top: 23rpx;
            color: #fff;
          }
        }
      }
    }

    .chat-box {
      flex: 1;
      margin-top: 40rpx;

      .chat-item {
        .item {
          margin-top: 25rpx;
          display: flex;
          height: auto;

          .avatar {
            height: 80rpx;
            width: 80rpx;
            border-radius: 10rpx;
            background-color: black;

            image {
              height: 100%;
              width: 100%;
            }
          }

          .content {
            height: auto;

            .upload-box {
              width: auto;
              max-width: 510rpx;
              position: relative;
              margin-left: 20rpx;

              .student {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                box-sizing: border-box;
                padding: 20rpx 20rpx;
                height: 100%;
                border-radius: 10rpx;
                background-color: #f2e4c6;

                image {
                  width: 40rpx;
                  height: 40rpx;
                  margin-right: 10rpx;
                }
              }

              .name {
                font-size: 20rpx;
              }

              .evaluate-container {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 510rpx;
                height: 200rpx;
                border-radius: 10rpx;
                background-color: #f2e4c6;

                .evaluate {
                  height: 93%;
                  width: 96%;
                  background-color: #fff;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  border-radius: 10rpx;

                  .label {
                    margin-top: 20rpx;
                  }

                  .button {
                    height: 87rpx;
                    width: 90%;
                    background-color: #5a83bf;
                    border-radius: 60rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    letter-spacing: 8rpx;
                    margin-top: 23rpx;
                    color: #fff;
                  }
                }
              }

            }

            .message-box {
              width: auto;
              max-width: 63vw;

              .name {
                font-size: 20rpx;
              }

              .message {
                position: relative;
                box-sizing: border-box;
                padding: 20rpx 20rpx;
                height: 100%;
                border-radius: 10rpx;
                background-color: #f2e4c6;
              }
            }
          }
        }

        .client {
          justify-content: flex-end;
          @extend .item;

          .content {
            .upload-box {
              margin-right: 20rpx;

              .arrow {
                position: absolute;
                height: 0px;
                width: 0rpx;
                right: -20rpx;
                top: 20rpx;
                border: 10rpx solid transparent;
                border-left: 10rpx solid #f2e4c6;
              }
            }

            .message-box {
              margin-right: 20rpx;

              .message {
                text-align: right;

                .arrow {
                  position: absolute;
                  height: 0px;
                  width: 0rpx;
                  right: -20rpx;
                  top: 20rpx;
                  border: 10rpx solid transparent;
                  border-left: 10rpx solid #f2e4c6;
                }
              }
            }
          }
        }

        .server {
          @extend .item;

          .content {
            .message-box {
              margin-left: 20rpx;

              .message {
                .arrow {
                  position: absolute;
                  height: 0px;
                  width: 0rpx;
                  left: -20rpx;
                  top: 20rpx;
                  border: 10rpx solid transparent;
                  border-right: 10rpx solid #f2e4c6;
                }
              }
            }
          }
        }
      }
    }
  }

  .input-bar {
    position: fixed;
    bottom: env(safe-area-inset-bottom);
    background-color: #f2e6c6;
    width: 100vw;
    height: 100rpx;
    display: flex;
    align-items: center;

    view {
      background-color: #4b9ae9;
      color: #ffffff;
      font-size: 24rpx;
      height: 48rpx;
      width: 80rpx;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 21rpx;
    }

    input {
      border-radius: 10rpx;
      border: 1rpx solid #acaba8;
      background-color: #ffffff;
      height: 68rpx;
      width: 80vw;
      margin: 0 auto;
      box-sizing: border-box;
      padding-left: 20rpx;
      font-size: 28rpx;
    }
  }
}